<template>
  <view class="search">
    <image :src="imgBaseUrlV2 + 'xueyuan_sousuo.png'" mode="" class="icon" />
    <input
      type="text"
      v-model="keyword"
      :placeholder="placeholder"
      class="input"
      @input="onInput"
      @blur="onBlur"
      @focus="onFocus"
      @confirm="onConfirm"
      :disabled="disabled"
      :confirm-type="confirmType"
      :focus="!!autoFocus"
      :auto-focus="!!autoFocus"
      @click="onClick"
    />

    <image
      v-if="keyword"
      :src="imgBaseUrlV2 + 'fankui_dle.png'"
      mode=""
      class="delete"
      @click="onClear"
    />
  </view>
</template>

<script>
import { imgBaseUrl, imgBaseUrlV2 } from "@/common/config";
export default {
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    autoFocus: {
      default: false,
    },
    disabled: {
      default: false,
    },
    confirmType: {
      default: "search",
    },
    placeholder: {
      default: "请输入",
    },
  },
  data() {
    return {
      imgBaseUrlV2,
      keyword: "",
      focus: false,
    };
  },
  methods: {
    onInput(e) {
      let value = e.detail.value;
      this.$emit("input", value);
    },
    onClick() {
      this.$emit("click");
    },
    onBlur(e) {
      this.$emit("blur", e);
    },
    onFocus(e) {
      this.$emit("focus", e);
    },
    onConfirm(e) {
      this.$emit("confirm", e);
    },
    onClear(e) {
      this.keyword = "";
      this.$emit("input", "");
      this.$emit("confirm", e);
      // this.$emit("clear", e);
    },
  },
  created() {
    this.keyword = this.value;
  },
  mounted() {
    console.log(this.autoFocus, "?autoFocus");
  },
  watch: {
    value(n, o) {
      if (n !== o) {
        this.keyword = n;
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.search {
  position: relative;
  display: flex;
  margin: 0 24rpx;
  background: rgba(255, 255, 255, 0.15);
  height: 72rpx;
  line-height: 72rpx;
  border-radius: 10rpx;

  >.icon {
    // position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    flex: 0 0 40rpx;
    width: 40rpx;
    height: 40rpx;
    margin: auto 16rpx;
  }

  >.delete {
    // position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    flex: 0 0 42rpx;
    width: 42rpx;
    height: 40rpx;
    margin: auto 18rpx;
  }

  >.input {
    display: block;
    // width: 100%;
	color:#fff;
    flex: 1;
    // padding: 0 16rpx;
    // padding: 0 16rpx 0 66rpx;
    height: 72rpx;
    line-height: 72rpx;
  }
}
</style>